<template>
	<view class="login">
		<view class="black_1">
			<view class="line_2" >
				注册账号
			</view>
			<view class="line_4">
				<view class="left">0086</view>
				<uni-easyinput
				class="inputs"
				type="number" 
				v-model="phone" 
				:inputBorder="false" 
				:styles="{backgroundColor: 'transparent'}"
				placeholder="请输入手机号"
				placeholder-style="color:#9F9E9E;font-size:16px"
				></uni-easyinput>
			</view>
			<view class="line_5">
				<uni-easyinput
				class="inputs"
				type="text" 
				v-model="code" 
				:inputBorder="false" 
				:styles="{backgroundColor: 'transparent'}"
				placeholder="请输入验证码"
				placeholder-style="color:#9F9E9E;font-size:16px"
				></uni-easyinput>
				<view class="right" @click="sendCode()">{{codeText}}</view>
			</view>
			
			<view class="line_5">
				<uni-easyinput
				class="inputs"
				type="password" 
				v-model="password" 
				:inputBorder="false" 
				:styles="{backgroundColor: 'transparent'}"
				placeholder="请输入密码"
				placeholder-style="color:#9F9E9E;font-size:16px"
				></uni-easyinput>
			</view>
			
			
			<view class="line_5">
				<uni-easyinput
				class="inputs"
				type="password" 
				v-model="payPassword" 
				:inputBorder="false" 
				:styles="{backgroundColor: 'transparent'}"
				placeholder="请输入支付密码"
				placeholder-style="color:#9F9E9E;font-size:16px"
				></uni-easyinput>
			</view>
			<view class="line_5">
				<uni-easyinput
				class="inputs"
				type="text" 
				:disabled="disabled"
				v-model="invite_code" 
				:inputBorder="false" 
				:styles="{backgroundColor: 'transparent'}"
				placeholder="邀请码(选填)"
				placeholder-style="color:#9F9E9E;font-size:16px"
				></uni-easyinput>
			</view>
			<view class="line_7" @click="submit()">
				立即注册
			</view>
			<view class="line_8" @click="back()">
				{{invite_code?'我已注册,立即下载':'返回登录'}}
			</view>
		</view>
		<download ref="download"></download>
	</view>
</template>

<script>
	import download from '@/components/download/download.vue'
	export default {
		components: {
			download
		},
		data() {
			return {
				phone:'',
				password:'',
				payPassword:'',
				code:'',
				invite_code:'',
				android_download_url: 'http://zygq.opo5.com/llwg.apk',
				apple_download_url: 'http://zygq.opo5.com/h5',
				codeText: '发送',
				codeTime: 59,
				disabled:false,
				inter:null
			};
		},
		onLoad(opt) {
			if (opt.invite_code) {
				this.invite_code = opt.invite_code
				// #ifdef H5
				this.disabled = true;
				// #endif
			}
		
			var that = this
			this.api.http.requests('common/webSetting', {}, res => {
				if (res.data.version) {
					that.android_download_url = res.data.version.version_android_url
					that.apple_download_url = res.data.version.version_ios_url
				}
			}, "POST")
		},
		methods:{
			downloads(){
				this.$refs.download.open(this.android_download_url,this.apple_download_url)
			},
			back(){
				if(this.invite_code){
					this.$refs.download.open(this.android_download_url,this.apple_download_url)
				}else{
					uni.navigateBack()
				}
				
			},
			getTextCode() {
				var that = this
				if(this.inter)
					return
				this.inter = setInterval(function() {
					if (that.codeTime <= 0) {
						clearInterval(this.inter);
						this.inter=null
						that.codeText = "获取验证码"
						that.codeTime = 59
						return false;
					}
					that.codeText = that.codeTime + "秒"
					that.codeTime -= 1;
				}, 1000);
			},
			sendCode() {
				if(this.inter)
					return
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: 'none'
					})
					return
				}
			
				let data = {
					"mobile": this.phone,
					"event": "register",
				}
				uni.showLoading({
			
				})
				// this.getTextCode()
				this.api.http.requests("sms/send", data, res => {
					this.getTextCode()
					uni.showToast({
						title: res.msg
					})
				}, "POST")
			},
			submit(){
				var that = this
				// if(that.disabled){
				// 	that.$refs.download.open()
				// }
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				
				if (!this.code) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				
				if (!this.password) {
					uni.showToast({
						title: "请输入登录密码",
						icon: "none"
					})
					return
				}
				
				if (!this.payPassword) {
					uni.showToast({
						title: "请输入支付密码",
						icon: "none"
					})
					return
				}
				let data = {
					"mobile": this.phone,
					"captcha": this.code,
					"password": this.password,
					"confirm_password": this.password,
					"pay_password": this.payPassword,
					"p_id": this.invite_code,
				}
				
				this.api.http.requests("user/register", data, res => {
					uni.showModal({
						content: res.msg
					})
					if (res.code == 200) {
						if (this.disabled) {
							this.downloads()
						} else {
							this.custom.tool.jump(2, 'login/login');
						}
					}
				}, "POST")
			}
		},
		onUnload() {
			if(this.inter){
				clearInterval(this.inter);
			}
		}
	}
</script>

<style lang="less">
page{
		background: url(@/static/bg2.png) no-repeat;
		background-size: 100% 100%;
	}
.black_1{
	margin:  100px 10px 10px 10px;
	background: #00000050;
	border-radius: 15px 15px 15px 15px;
	text-align: center;
	padding: 20px 20px 35px 20px;
	
	
	.line_2{
		font-size: 42rpx;
		font-weight: 800;
		color: #FFFFFF;
		margin-top: 10px;
		margin-bottom: 25px;
		text-align: start;
	}
	.line_5,.line_4{
		display: flex;
		margin-top: 25px;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 30px;
		padding: 0px 10px;
		.right{
			padding: 1px 8px;
			color: #FFFFFF;
			background: #FE903D;
			border-radius: 30px 30px 30px 30px;
		}
		.left{
			padding-right: 10px;
			border-right: 1px solid #A8A8A8;
		}
	}
	.inputs{
		text-align: start;
		padding: 5px 0px;
	}
	.line_6{
		margin-top: 10px;
		float: right;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.line_7{
		margin: 45px 2px 0px 2px;
		padding: 8px;
		background: #FFFFFF;
		border-radius: 14rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.line_8{
		margin: 20px 2px 0px 2px;
		border-radius: 14rpx ;
		padding: 8px;
		border: 2rpx solid #FFFFFF;
		font-size: 35rpx;
		font-weight: bold;
		color: #FFFFFF;

	}
	

}

</style>
